<template>
    <div class="cultural-products-container">
      <div class="cultural-peoduces-content">
            <h1 class="main-title">文创臻品馆</h1>
            <p class="sub-title">传承千年文明，缔造现代生活美学</p>  
          <!-- 分类筛选系统 -->
          <div class="category-system">
            <el-radio-group 
              v-model="activeCategory"
              class="category-radio-group"
              @change="handleCategoryChange"
            >
              <el-radio-button 
                v-for="category in categories"
                :key="category.name"
                :label="category.name"
                class="category-radio"
              >
                {{ category.label }}
                <span class="category-badge" v-if="category.new">New</span>
              </el-radio-button>
            </el-radio-group>
          </div>
    
          <!-- 产品展示系统 -->
          <el-row :gutter="24" class="product-list">
            <el-col
              v-for="product in displayedProducts"
              :key="product.id"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              class="product-col"
            >
              <!-- 产品卡片 -->
              <el-card
                :body-style="{ padding: 0 }"
                class="product-card"
                @mouseenter.native="handleCardHover(product.id)"
                @mouseleave.native="handleCardHover(null)"
              >
                <!-- 热卖标识 -->
                <div v-if="product.hot" class="hot-sale-tag">HOT</div>
                
                <!-- 产品图片 -->
                <div class="image-wrapper">
                  <img
                    :src="product.image"
                    class="product-image"
                    :class="{ 'zoom-effect': hoveredProduct === product.id }"
                    alt="文创产品"
                  >
                </div>
    
                <!-- 产品信息 -->
                <div class="product-info">
                  <h3 class="product-name">{{ product.name }}</h3>
                  <p class="product-description">{{ product.description }}</p>
                  <div class="meta-info">
                    <span class="product-price">￥{{ product.price }}</span>
                    <el-button
                      type="danger"
                      size="mini"
                      round
                      class="add-cart-btn"
                      @click="handleAddToCart(product)"
                      :loading="product.adding"
                    >
                      {{ product.adding ? '添加中' : '加入购物车' }}
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
      </div>
    <footer class="footer">
      <p>© 2025 历史博物馆. 版权所有.</p>
      <button class="back-to-top" @click="scrollToTop">回到顶部</button>
    </footer>
  </div>
</template>
    
<script>
  export default {
    data() {
      return {
        activeCategory: 'all',
        hoveredProduct: null,
        cart: [],
          categories: [
          { name: 'all', label: '全部商品', new: false },
          { name: 'accessories', label: '文创配饰', new: true },
          { name: 'stationery', label: '艺术文具', new: true },
          { name: 'home', label: '生活美学', new: true }
        ],
        products: [
          {
            id: 101,
            name: '青铜纹样丝巾',
            category: 'accessories',
            description: '以商周青铜器纹样为灵感的桑蚕丝巾',
            price: 398,
            image: require('@/assets/products/silk-scarf.jpg'),
            hot: true,
            adding: false,
            stock: 50
           },
          {
            id: 102,
            name: '敦煌色卡笔记本',
            category: 'stationery',
            description: '复刻敦煌壁画经典色彩的专业色卡本',
            price: 128,
            image: require('@/assets/products/notebook.jpg'),
            hot: false,
            adding: false,
            stock: 120
          },
          {
            id: 103,
              name: '赤壁赋帆布包',
              category: 'home',
              description: '以赤壁赋为设计元素的帆布包',
              price: 128,
              image: require('@/assets/products/bag.jpg'),
              hot: false,
              adding: false,
              stock: 120
          }
        ]
        };
      },
      computed: {
        displayedProducts() {
          if (this.activeCategory === 'all') return this.products;
          return this.products.filter(p => p.category === this.activeCategory);
        }
      },
      methods: {
        handleCardHover(productId) {
          this.hoveredProduct = productId;
        },
        handleCategoryChange(category) {
          this.activeCategory = category;
        },
        async handleAddToCart(product) {
          if (product.stock <= 0) {
            this.$message.warning('商品已售罄');
            return;
          }
    
          product.adding = true;
          try {
            await this.addToCart(product);
            this.$message.success(`${product.name} 已加入购物车`);
          } catch (error) {
            this.$message.error('加入购物车失败，请重试');
          } finally {
            product.adding = false;
          }
        },
        addToCart(product) {
          return new Promise(resolve => {
            setTimeout(() => {
              this.cart.push(product);
              product.stock--;
              resolve();
            }, 800);
          });
        },
        scrollToTop() {
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          });
        }
      }
    };
    </script>
    
    <style scoped>
    .cultural-products-container::before {
      content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/background.jpg') repeat-x center/cover;
    z-index: -1;
    opacity: 0.3;
  }

    .cultural-products-container {
      position: relative;
      min-height: 100vh;
    }
    
    .cultural-peoduces-content{
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(5px);
    }

    .main-title {
      font-size: 30pt;
      color: #333;
      margin-bottom: 10px;
    }
    
    .sub-title {
      font-size: 12pt;
      color: gray;
      margin: 10px 0 40px;
    }
    
    .category-system {
      margin-bottom: 40px;
      text-align: center;
    }
    
    .category-radio-group {
      display: inline-flex;
      gap: 15px;
    }
    
    .category-radio {
      position: relative;
      border-radius: 25px !important;
      padding: 8px 25px !important;
      transition: all 0.3s;
    }
    
    .category-radio.is-active {
      background: #409EFF !important;
      color: white !important;
    }
    
    .category-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff4757;
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
      line-height: 1;
    }
    
    .product-card {
      border-radius: 12px !important;
      overflow: hidden;
      transition: transform 0.3s;
      margin-bottom: 24px;
    }
    
    .product-card:hover {
      transform: translateY(-8px);
    }
    
    .hot-sale-tag {
      position: absolute;
      top: 15px;
      left: -5px;
      background: #ff4757;
      color: white;
      padding: 4px 15px;
      border-radius: 0 15px 15px 0;
      font-size: 14px;
      z-index: 2;
    }
    
    .image-wrapper {
      height: 240px;
      overflow: hidden;
      position: relative;
    }
    
    .product-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .zoom-effect {
      transform: scale(1.05);
    }
    
    .product-info {
      padding: 15px;
    }
    
    .product-name {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
      height: 44px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .product-description {
      font-size: 14px;
      color: #666;
      margin-bottom: 15px;
      height: 40px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .meta-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    
    .product-price {
      font-size: 20px;
      color: #ff4757;
      font-weight: 600;
    }
    
    .add-cart-btn {
      background: #409EFF !important;
      border-color: #409EFF !important;
    }
    
    .add-cart-btn:hover {
      background: #66b1ff !important;
      border-color: #66b1ff !important;
    }
    
    .footer {
    position:relative;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #333333;
    color: white;
    padding: 12px 0;
    border-top: 2px solid #4D4D4D;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
  }
  
  .back-to-top {
    padding: 8px 16px;
    background: #555555;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    min-width: 100px;
  }
  
  .back-to-top:hover {
    background: #666666;
    transform: translateY(-1px);
  }
  
  @media (max-width: 768px) {
    .footer {
      flex-wrap: wrap;
      padding: 12px 10px;
      gap: 10px;
    }
   
    .back-to-top {
      min-width: auto;
      width: calc(50% - 10px);
    }
   
  }
  
    </style>